<template>
	<!-- 编辑角色 -->
    <div class="roles-edit">
      <!-- 导航 -->
      <tz-breadcrumb  :pathArr='[{"name": "设置"},{"name": "角色管理", "url": "/roles"}, {"name": "角色权限编辑", "url": ""}]'></tz-breadcrumb>
      <div class="home-contain mt20 box-card-shadow">
       
        <el-form  class="" label-width="100px">
           <el-row>
                 <el-col :span="11">
                  <el-form-item label="角色名称">
                    <el-input class="form-input" v-model="sRolesName"></el-input>
                  </el-form-item>
                </el-col>
            </el-row>
              
            <el-row>
                  <el-col :span="11">
                  <div class="rights-border">
                    <div class="rights-title text-left">菜单</div>
                    <el-checkbox v-model="checkedMenu" label="全选" @change = 'checkedMenuClick("checkedMenu")'></el-checkbox>
                    <el-tree
                      v-loading="loading1"
                      :data="menuList"
                      show-checkbox
                      node-key="id"
                      ref="tree1"
                      default-expand-all
                      :expand-on-click-node="false"
                      :props="defaultProps1"
                      >
                    </el-tree>
                  </div>
                  </el-col>
                  <el-col :span="2" ><span class="center-distance">11</span></el-col>
                  <el-col :span="11">
                    <div class="rights-border">
                      <div class="rights-title text-left">权限</div>
                      <el-checkbox v-model="checkedRight" label="全选" @change = 'checkedMenuClick("checkedRight")'></el-checkbox>
                      <el-tree
                        v-loading="loading2"
                        :data="rightsList"
                        show-checkbox
                        node-key="id"
                        ref="tree2"
                        :props="defaultProps2">
                      </el-tree>
                    </div>
                  </el-col>
            </el-row>
         
            <el-button type="primary" @click="onSubmit" v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
          
        </el-form>
      </div>
      
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  data () {
    return {
      token: localStorage.getItem('token'),
      loading1: true,
      loading2: true,
      makesure: true,
      fullscreenLoading: false,
      // 权限全选是否选中
      checkedRight: false,
      // 菜单全选是否选中
      checkedMenu: false,
      // 角色名
      sRolesName: '',
      // 选中的菜单id
      aMenuId: '',
      // 选中的权限id
      aPermissionId: '',
      // 获取的菜单id
      MenuIdget: '',
      // 获取的权限id
      PermissionIdget: '',
      // 菜单列表
      menuList: [],
      // 菜单列表默认指的绑定字段
      defaultProps1: {
        children: 'next',
        label: 'title'
      },
      // 权限列表
      rightsList: [],
      // 权限列表默认指的绑定字段
      defaultProps2: {
        children: 'next',
        label: 'slug'
      }
    };
  },
  methods: {
    // 全选点击事件
    checkedMenuClick (selectAll) {
      // 全选操作方法
      console.log(this[selectAll]);
      console.log(this.checkedMenu);
      if (this.checkedMenu === true) {
        // 点击全选实现全选操作
        var selectAllMenuList = this.menuList.map(function (v) { return v.id; });
        this.$refs.tree1.setCheckedKeys(selectAllMenuList);
      } else if (this.checkedMenu === false) {
        // 否则清空
        this.$refs.tree1.setCheckedKeys([]);
        console.log(33);
      }
      if (this.checkedRight === true) {
        // 点击全选实现全选操作
        var selectAllrightsList = this.rightsList.map(function (v) { return v.id; });
        this.$refs.tree2.setCheckedKeys(selectAllrightsList);
      } else if (this.checkedRight === false) {
        // 否则清空
        this.$refs.tree2.setCheckedKeys([]);
        console.log(44);
      }
    },
    // 修改角色权限以及名称-提交按钮
    onSubmit () {
      var that = this;
      var menuIdList = that.$refs.tree1.getCheckedNodes();
      var permissionIdList = that.$refs.tree2.getCheckedNodes();
      var menuId = [];
      menuIdList.forEach(element => {
        console.log(element.id);
        menuId.push(element.id);
      });
      var permissionId = [];
      permissionIdList.forEach(element => {
        console.log(element.id);
        permissionId.push(element.id);
      });
      that.aMenuId = menuId.join();
      that.aPermissionId = permissionId.join();
      console.log(permissionId.join());
      console.log(that.aMenuId);
      console.log(55);
      console.log(that.aPermissionId);
      if (!that.makesure) {
        return false;
      }
      if (that.sRolesName === '') {
        that.$message.error('角色名称不能为空');
        return false;
      } else if (that.aMenuId === '') {
        that.$message.error('菜单id不能为空');
        return false;
      } else if (that.aPermissionId === '') {
        that.$message.error('权限id不能为空');
        return false;
      }
      that.makesure = false;
      that.fullscreenLoading = !that.fullscreenLoading;
      // 修改角色接口请求
      http.post(api.RoleSave, {
        token: that.token,
        id: that.$route.query.id,
        name: that.sRolesName,
        slug: that.sRolesName,
        menu_id: that.aMenuId,
        permission_id: that.aPermissionId
      }, (res) => {
        console.log(res);
        console.log(33);
        that.fullscreenLoading = !that.fullscreenLoading;
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.$message.success('修改角色成功');
          // 防爆点击3秒后才可以点击
          setTimeout(function () {
            that.makesure = true;
          }, 3000);
          // // 获取菜单列表
          // that.getMenuList();
          // // 获取权限列表
          // that.getPermissionList();
          // // 获取角色详情
          // that.getRoleDetail();
        } else {
          that.$message.error(res.msg);
          that.makesure = true;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.makesure = true;
        that.fullscreenLoading = !that.fullscreenLoading;
      });
    },
    getRoleDetail () {
      var that = this;
      // 获取角色详情RoleDetails
      http.get(api.RoleDetails, {
        token: that.token,
        id: that.$route.query.id
      }, (res) => {
        console.log(res);
        console.log(66);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          // 获取角色的角色名
          that.sRolesName = res.data[0].return.name;
          console.log(res.data[0].return.menu);
          that.aMenuId = res.data[0].return.menu;
          that.aPermissionId = res.data[0].return.permission;
          console.log(that.aMenuId);
          console.log(1212);
          this.$refs.tree1.setCheckedKeys(that.aMenuId);
          this.$refs.tree2.setCheckedKeys(that.aPermissionId);
          // 获取角色的菜单id
        } else {
          that.$message.error(res.msg);
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
      });
    },
    getMenuList () {
      var that = this;
      that.loading1 = true;
      // 获取菜单列表
      http.get(api.MenuList, {
        token: that.token
      }, (res) => {
        console.log(res);
        console.log(22);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.menuList = res.data;
          that.loading1 = false;
        } else {
          that.$message.error(res.msg);
          that.loading1 = false;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.loading1 = false;
      });
    },
    getPermissionList () {
      var that = this;
      that.loading2 = false;
      // 获取权限列表
      http.get(api.PermissionList, {
        token: that.token
      }, (res) => {
        console.log(res);
        console.log(33);
        if (res.code === '10001' && res.status === 'SUCCESS') {
          that.rightsList = res.data[0].list;
          that.loading2 = false;
        } else {
          that.$message.error(res.msg);
          that.loading2 = false;
        }
      }, () => {
        that.$message.error('网络错误，请稍候再试');
        that.loading2 = false;
      });
    }
  },
  mounted: function () {
    var that = this;
    // 获取菜单列表
    that.getMenuList();
    // 获取权限列表
    that.getPermissionList();
    // 获取角色详情
    that.getRoleDetail();
  }
};
</script>

<style lang="stylus" scoped>
@import url('./role-rights-editor.css');
  .home-contain
    background: #fff
    padding: 20px
    box-sizing: border-box
  .mt20
    margin-top: 20px
    box-sizing: border-box
  .box-card-shadow
    box-shadow: 1px 1px 1px #999;
    .rights-border
      margin-bottom: 20px
      .rights-title
        width:100px
        font-size: 14px;
        color: #606266;
        line-height: 30px;
    .center-distance
      opacity: 0
</style>
